<template>
  <div class="wrapper">
    <!-- 顶部标题 -->
    <header class="page-header">
      <p>我的</p>
    </header>
    
    <!-- 用户信息头部 -->
    <div class="user-header">
      <img :src="user.userImg || defaultAvatar" @error="handleImageError">
      <div class="user-info">
        <p class="username">{{ user.username || '未登录用户' }}</p>
        <p class="user-id">ID: {{ user.userId || '--' }}</p>
      </div>
    </div>

    <!-- 个人信息部分 -->
    <div class="user-actions">
      <div class="action-group">
        <div class="action-item" @click="changeImg">
          <img src="../assets/user.png" class="action-icon">
          <span>修改信息</span>
        </div>
        <div class="action-item" @click="toMyWallet">
          <img src="../assets/wallet.png" class="action-icon">
          <span>我的钱包</span>
        </div>
      </div>
      
      <div class="action-group">
        <div class="action-item" @click="changePwd">
          <i class="fa fa-expeditedssl"></i>
          <span>修改密码</span>
          <i class="fa fa-angle-right"></i>
        </div>
        <div class="action-item" @click="logOut">
          <i class="fa fa-sign-out"></i>
          <span>退出登录</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>

    <!-- 底部菜单 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'MyProfile',
  components: {
    Footer
  },
  data() {
    return {
      user: {
        userId: '',
        userName: '',
        userImg: '',
        userSex: 0
      },
      defaultAvatar: require('../assets/default-avatar.png')
    }
  },
  created() {
    this.loadUserFromSession();
  },
  methods: {
    // 直接从sessionStorage加载用户信息
    loadUserFromSession() {
      const sessionUser = this.$getSessionStorage('user');
      if (sessionUser) {
        this.user = {
          userId: sessionUser.userId || '',
          username: sessionUser.username || '',
          userImg: sessionUser.userImg || '',
          userSex: sessionUser.userSex || 0
        };
        console.log('从sessionStorage加载用户信息:', this.user);
      } else {
        console.warn('未找到用户信息，用户可能未登录');
        this.$router.push('/login');
      }
    },
    
    // 修改头像
    changeImg() {
      if (!this.user.userId) {
        alert('请先登录');
        this.$router.push('/login');
        return;
      }
      
      this.$router.push({
        path: '/myImg',
        query: { userId: this.user.userId }
      });
    },
    
    // 跳转到钱包页面
    toMyWallet() {
      if (!this.user.userId) {
        alert('请先登录');
        this.$router.push('/login');
        return;
      }
      
      this.$router.push('/myWallet');
    },
    
    // 修改密码
    changePwd() {
      this.$router.push('/changePwd');
    },
    
    // 退出登录
    async logOut() {
      try {
        // 调用后端登出接口（可选）
        await this.$axios.post('/api/auth/logout');
      } catch (error) {
        console.warn('登出API调用失败，继续清除前端状态:', error);
      }
      
      // 清除前端存储
      this.$removeSessionStorage('user');
      localStorage.removeItem('user');
      localStorage.removeItem('token');
      sessionStorage.removeItem('token');
	  localStorage.removeItem(this.user.userId);
      
      // 重置用户数据
      this.user = {
        userId: '',
        userName: '',
        userImg: '',
        userSex: 0
      };
      
      alert('退出成功');
      this.$router.push('/index');
    },
    
    // 处理图片加载错误
    handleImageError(e) {
      e.target.src = this.defaultAvatar;
    }
  }
}
</script>

<style scoped>
  /*************** 总容器 ***************/
  .wrapper {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    position: relative;
  }

  /*************** 页面头部 ***************/
  .page-header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*************** 用户信息头部 ***************/
  .user-header {
    width: 100%;
    height: 30vw;
    padding-top: 12vw;
    background-color: #0097FF;
    display: flex;
    align-items: center;
    padding-left: 5vw;
  }

  .user-header img {
    width: 16vw;
    height: 16vw;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
  }

  .user-info {
    margin-left: 5vw;
    color: #fff;
  }

  .user-info .username {
    font-size: 5vw;
    font-weight: bold;
    margin-bottom: 1vw;
  }

  .user-info .user-id {
    font-size: 3.5vw;
    opacity: 0.8;
  }

  /*************** 操作区域 ***************/
  .user-actions {
    width: 100%;
    margin-top: 5vw;
  }

  .action-group {
    background-color: #fff;
    margin-bottom: 4vw;
    border-radius: 2vw;
    overflow: hidden;
  }

  .action-item {
    width: 100%;
    height: 14vw;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .action-item:hover {
    background-color: #f9f9f9;
  }

  .action-item:last-child {
    border-bottom: none;
  }

  .action-icon {
    width: 8vw;
    height: 8vw;
    margin-right: 3vw;
  }

  .action-item span {
    flex: 1;
    font-size: 4.2vw;
    color: #333;
  }

  .action-item i.fa-angle-right {
    color: #999;
    font-size: 5vw;
  }

  /*************** 响应式设计 ***************/
  @media (min-width: 768px) {
    .page-header {
      height: 60px;
      font-size: 20px;
    }
    
    .user-header {
      height: 180px;
      padding-top: 60px;
    }
    
    .user-header img {
      width: 80px;
      height: 80px;
    }
    
    .user-info .username {
      font-size: 24px;
    }
    
    .user-info .user-id {
      font-size: 16px;
    }
    
    .action-item {
      height: 60px;
      padding: 0 20px;
    }
    
    .action-icon {
      width: 30px;
      height: 30px;
      margin-right: 15px;
    }
    
    .action-item span {
      font-size: 18px;
    }
    
    .action-item i.fa-angle-right {
      font-size: 20px;
    }
  }
</style>